<template>
  <v-layout column justify-center>
    <v-flex>
      <v-btn @click="openLocalDir">Open Dir</v-btn>
      <span>{{openDir}}</span>
    </v-flex>
    <v-flex>
      <v-btn @click="openSaveDir">Save Dir</v-btn>
      <span>{{saveDir}}</span>
    </v-flex>
    <v-flex>
      <v-dialog v-model="dialogVisable" width="800">
        <v-btn slot="activator" :disabled=" !(openDir && saveDir) ">Start</v-btn>
        <v-card>
          <!-- <v-card-title class="headline grey lighten-2" primary-title></v-card-title> -->
          <v-card-media :src="'file://' + currentImgPath" height="700px"></v-card-media>
          <v-divider></v-divider>
          <v-card-actions>
            <v-btn color="error" @click="handleBtnClick('abandon')"><v-icon>warning</v-icon>废除</v-btn>
            <v-btn color="warning" @click="handleBtnNext()"><v-icon>skip_next</v-icon>跳过</v-btn>
            <v-spacer></v-spacer>
            <v-btn color="success" @click="handleBtnClick('oo-male')"><v-icon>favorite</v-icon>好看-男</v-btn>
            <v-btn color="info" @click="handleBtnClick('xx-male')"><v-icon>clear</v-icon>一般-男</v-btn>
            <v-btn color="success" @click="handleBtnClick('oo-female')" ><v-icon>favorite</v-icon>好看-女</v-btn>
            <v-btn color="info" @click="handleBtnClick('xx-female')"><v-icon>clear</v-icon>一般-女</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <!-- <v-btn :disabled=" !(openDir && saveDir) " >Start</v-btn> -->
    </v-flex>
    <v-flex>
      <span>count: {{count}}</span><br>
      <span>the rest: {{total}}</span>
      <p>skipped: {{skippedCount}}</p>
    </v-flex>
  </v-layout>
</template>
<script>
import { remote } from 'electron'
export default {
  name: 'InspireView',
  data () {
    return {
      openDir: null,
      saveDir: null,
      dialogVisable: false,
      // currentImgPath: '/static/v.png',
      // currentImgPath: '',
      skippedCount: 0,
      filesArray: [],
      count: 0
    }
  },
  computed: {
    total: function () {
      return this.filesArray.length || 0
    },
    currentImgPath: function () {
      if (this.openDir === null) {
        return null
      }
      // const path = require('path')
      // const reg = new RegExp('\\', 'g')
      // console.log('file://' + this.openDir.replace(reg, '//') + '//' + this.filesArray[0])
      return this.openDir.replace(/\\/g, '/') + '//' + this.filesArray[0]
      // return 'file://C://Users//Makeup//Pictures//cats//005Ex99Lgy1fj5mtt672gj30j60j6mzu.jpg'
    }
  },
  watch: {
  },
  methods: {
    openLocalDir: function () {
      const { dialog } = remote
      const that = this
      dialog.showOpenDialog({
        title: '选择图片路径',
        properties: ['openFile', 'openDirectory']
      }, function (filePaths) {
        if (filePaths !== undefined) {
          that.openDir = filePaths[0]
          // console.log(that.openDir)
          that.readOpenDir(that.openDir)
        }
      })
      // const os = require('os')
      // shell.showItemInFolder(os.homedir())
    },
    openSaveDir: function () {
      const { dialog } = remote
      const that = this
      dialog.showOpenDialog({
        title: '选择图片存放路径',
        properties: ['openFile', 'openDirectory']
      }, function (filePaths) {
        if (filePaths !== undefined) {
          that.saveDir = filePaths[0]
        }
      })
    },
    readOpenDir: function () {
      const that = this
      if (this.openDir) {
        // if (this.currentImgPath === '') {
        const fs = require('fs')
        fs.readdir(this.openDir, function (err, files) {
          if (!err) {
            that.filesArray = files
          }
        })
        // }
      }
    },
    handleBtnClick: function (type) {
      const fs = require('fs')
      const saveTypeDir = this.saveDir + '\\' + type
      if (!fs.existsSync(saveTypeDir)) {
        fs.mkdirSync(saveTypeDir)
      }
      const dst = saveTypeDir + '\\' + this.filesArray[0]
      // fs.copyFileSync(this.currentImgPath, saveTypeDir)
      fs.writeFileSync(dst, fs.readFileSync(this.currentImgPath))
      fs.unlinkSync(this.currentImgPath)
      this.count += 1
      this.filesArray.shift()
    },
    handleBtnNext: function () {
      this.skippedCount += 1
      this.filesArray.shift()
    }
  }
}
</script>

<style scoped>
  img {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
</style>